<template>
  <div class="categories">
    <Breadcrumb :params1="'商品管理'" :params2="'商品分类'"></Breadcrumb>
    <el-card class="box-card">
      <el-button type="primary">添加分类</el-button>

      <zktable
        class="zktable"
        :data="categoriesList"
        :columns="columns"
        show-index
        border
        :expand-type="false"
        :selection-type="false"
      >
        <template slot="cat_deleted" scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted == false"></i>
          <i class="el-icon-error" v-else></i>
        </template>
        <template slot="cat_level" scope="scope">
          <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level == 1"
            >二级</el-tag
          >
          <el-tag type="danger" v-else>三级</el-tag>
        </template>
      </zktable>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[10, 20, 40, 60]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { goodscategories_api } from '@/api/index'

export default {
  data() {
    return {
      total: 0,
      params: {
        pagenum: 1,
        pagesize: 10,
      },

      categoriesList: [],
      columns: [
        { label: '分类名称', align: 'left', prop: 'cat_name', tree: true },
        {
          label: '是否有效',
          align: 'center',
          prop: 'cat_deleted',
          template: 'cat_deleted',
          type: 'template',
        },
        {
          label: '排序',
          align: 'center',
          prop: 'cat_level',
          template: 'cat_level',
          type: 'template',
        },
        {
          label: '操作',
          align: 'center',
          prop: 'action',
          template: 'action',
          type: 'template',
          width: '180px',
        },
      ],
    }
  },
  methods: {
    async getCategories() {
      var { data: res } = await goodscategories_api(this.params)

      console.log(res)
      this.categoriesList = res.data.result
      this.total = res.data.total
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.params.pagesize = val
      this.getCategories()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.pagenum = val
      this.getCategories()
    },
  },
  created() {
    this.getCategories()
  },
}
</script>

<style scope lang='less'>
.zktable {
  margin: 15px 0;
  .el-icon-success{
    color: #90ee90;
  }
  .el-icon-error{
    color: red;
  }
}
</style>